<template>
  <div>
    <!-- 上方搜索栏 -->
    <el-card>
      <WForm v-model="searchForm" :formConfig="searchFormItemsConfig">
        <!-- 搜索按钮 -->
        <template #searchBtn>
          <div class="flex items-end h-10">
            <el-button type="primary" size="default">
              <WIcon icon="material-symbols:search" class="mr-2" @click="doSearch" />
              搜索
            </el-button>
            <el-button type="info" @click="resetSearch" size="default">
              <WIcon icon="system-uicons:reset" class="mr-2" />
              重置
            </el-button>
          </div>
        </template>
        <!-- 搜索表的插槽 -->
        <template #[item]="{ form }" v-for="item in searchSlotList" :key="item">
          <slot :name="item" :form="form" />
        </template>
      </WForm>
    </el-card>

    <!-- 表格 -->
    <el-card class="mt-4">
      <div class="flex justify-between items-center">
        <!-- 左上角的插槽 -->
        <div>
          <slot name="TableLeftTop" />
        </div>
        <div>
          <div class="flex justify-end">
            <div>
              <!-- 右上角的插槽 -->
              <slot name="TableRightTop" />
            </div>
            <!-- 工具按钮 -->
            <div>工具</div>
          </div>
        </div>
      </div>

      <el-card class="mt-4">
        <WTable
          :data="tableData"
          :tableCols="tableCols"
          v-loading="tableLoading"
          v-model:tablePageSize="tablePageSize"
          v-model:tableCurrentPage="tableCurrentPage"
          :tableTotal="tableTotal"
        />
      </el-card>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import type { WFormItemsConfig, WPageProps } from '@/types/WLib'

const props = withDefaults(defineProps<WPageProps>(), {})

const { tableDataApi } = props
const { searchFormItems, searchForm, tableCols } = toRefs(props)

const searchFormItemsConfig = computed(() => {
  const searchBtn: WFormItemsConfig = {
    type: 'slot',
    name: 'searchBtn',
  }
  return [...searchFormItems.value, searchBtn]
})

// 把插槽的name取出来,方便接收
const searchSlotList = computed(() => {
  const slotItems = searchFormItems.value.filter(item => item.type === 'slot')
  if (slotItems.length) {
    return slotItems.map(item => item.name)
  }
  return []
})

const emit = defineEmits<{ (e: 'update:searchForm', value: any): void }>()
const resetSearch = () => {
  emit('update:searchForm', {})
  nextTick(() => {
    loadData()
  })
}
const doSearch = () => {
  nextTick(() => {
    loadData()
  })
}

const tableData = ref<Record<string, any>[]>([])
const tableLoading = ref(false)
const tableTotal = ref(0)
const tablePageSize = ref(10)
const tableCurrentPage = ref(1)

// 加载表格数据
const loadData = async () => {
  tableLoading.value = true
  const params = {
    ...searchForm.value,
    pageSize: tablePageSize.value,
    pageNum: tableCurrentPage.value,
  }

  try {
    const { data, total = 100 } = await tableDataApi(params)
    tableData.value = data
    tableTotal.value = total
  } finally {
    tableLoading.value = false
  }
}

// 监听分页变化
watch([tablePageSize, tableCurrentPage], () => {
  loadData()
})

loadData()

// 暴露给外部,方便父组件调用
defineExpose({
  resetSearch,
  doSearch,
  loadData,
  tableData,
})
</script>

<style lang="scss" scoped></style>
